<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="scripts/function.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/element-ui.css">

</head>
<body>
<div id="app">

    <div id="header" class="wrap">
        <div id="logo"><img src="images/logo.gif"/></div>
        <div class="help"><a href="shopping.html" class="shopping">购物车{{ this.shoppingCar.length }}件</a><a
                href="login.html">登录</a><a
                href="register.html">注册</a><a href="guestbook.html">留言</a><a
                href="manage/index.html">后台管理</a>
        </div>
        <div class="navbar">
            <ul class="clearfix">
                <li class="current"><a href="#">首页</a></li>
                <li><a href="#">图书</a></li>
                <li><a href="#">百货</a></li>
                <li><a href="#">品牌</a></li>
                <li><a href="#">促销</a></li>
            </ul>
        </div>
    </div>
    <div id="childNav">
        <div class="wrap">
            <ul class="clearfix">
                <li class="first"><a href="#">音乐</a></li>
                <li><a href="#">影视</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">小说</a></li>
                <li><a href="#">外语</a></li>
                <li><a href="#">数码相机</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">羽绒服</a></li>
                <li><a href="#">秋冬靴</a></li>
                <li><a href="#">运动鞋</a></li>
                <li><a href="#">美容护肤</a></li>
                <li><a href="#">家纺用品</a></li>
                <li><a href="#">婴幼奶粉</a></li>
                <li><a href="#">饰品</a></li>
                <li class="last"><a href="#">Investor Relations</a></li>
            </ul>
        </div>
    </div>

    <div id="register" class="wrap">
        <div class="shadow">
            <em class="corner lb"></em>
            <em class="corner rt"></em>
            <div class="box">
                <h1>欢迎回到易买网</h1>
                <form id="loginForm" v-loading="loading" @submit.prevent="submitForm" action="/">
                    <table>
                        <tr>
                            <td class="field">用户名：</td>
                            <td>
                                <input class="text" type="text" id="userId" v-model="user.userId"
                                       name="userId"/>
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="field">登录密码：</td>
                            <td>
                                <input class="text" type="password" id="password" v-model="user.password"
                                       name="password"/>
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="field">验证码：</td>
                            <td>
                                <img @click="getCaptcha" :src="captcha.captchaImage" id="safeCode"
                                     style="height: 50px; width: 100px"/>
                                <a id="changeCode" href="#" @click="getCaptcha">看不清，换一张</a><br>
                                <input type="text" name="code" v-model="captcha.captchaCode">
                                <div class="mess" style="color: red">{{ captcha.mess }}</div>
                                <span></span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><label class="ui-green"><input type="submit" name="submit"
                                                               value="立即登录"/></label>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="clear"></div>
    </div>

    <div id="footer">
        Copyright &copy; 2010 项目组 All Rights Reserved. 京ICP证1000001号
    </div>

</div>
<script type="text/javascript" src="plugins/vue/vue.js"></script>
<script type="text/javascript" src="plugins/axios/axios.min.js"></script>
<script type="text/javascript" src="api/user.js"></script>
<script type="text/javascript" src="api/common.js"></script>
<script type="text/javascript" src="plugins/element-ui/element-ui.js"></script>
<script type="text/javascript" src="scripts/request.js"></script>
<script type="text/javascript">
    let userInfo = null
    const app = new Vue({
        el: '#app',
        data: {
            captcha: {
                shoppingCar: [],
                captchaImage: '',
                captchaCode: '',
                flag: false,
                mess: '',
            },
            user: {},
            loading: false
        },
        async mounted() {
            // 在组件挂载完成后，向后端请求获取验证码图片
            await this.getCaptcha()
        },
        created() {
            axios.get("/user/getStatus")
            this.shoppingCar = JSON.parse(sessionStorage.getItem("ordersDetailList")) === null ? [] : JSON.parse(sessionStorage.getItem("ordersDetailList"));
        },
        methods: {
            async getCaptcha() {
                let resp = await getCaptchaPhoto();
                this.captcha.captchaImage = `data:image/png;base64,${resp.data}`;
            },
            async submitForm() {
                if (userInfo !== null) {
                    this.$message({
                        message: `已有用户${userInfo.userId},在此登录，请注销后尝试`,
                        type: 'success'
                    });
                    return
                }
                this.loading = true;
                setTimeout(async () => {
                    if (document.querySelectorAll('.error').length > 0) {
                        this.loading = false
                        return
                    }

                    if (this.captcha.flag === false) {
                        this.$message.error("验证码错误，请重新输入哦");
                        await this.getCaptcha()
                        this.loading = false
                        return
                    }

                    let data = await loginApi(this.user)
                    if (String(data.code) === '1') {
                        this.$message({
                            message: '登录成功，正在为你跳转主界面...',
                            type: 'success'
                        });
                        localStorage.setItem('userInfo', JSON.stringify(data.data))
                        setTimeout("location.href='index.html'", 1000);
                    } else {
                        this.$message.error("登陆失败，请重新尝试");
                    }
                    this.loading = false
                }, 500)
                clearTimeout(this.timer);
            }
        },
        watch: {
            // 对验证码进行验证
            'captcha.captchaCode'(newValue) {
                this.captcha.mess = ''

                if (newValue.length > 0 && newValue.length !== 4) {
                    this.captcha.mess = '验证码错误'
                    this.captcha.flag = false
                }
                if (newValue.length === 4) {
                    // 进行防抖
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await checkCaptcha(newValue)
                        let result = res.data
                        if (String(result) === '1') {
                            this.captcha.flag = true
                            this.captcha.mess = ''
                        } else {
                            this.captcha.mess = '验证码错误'
                            this.captcha.flag = false
                        }
                    }, 500)
                }

            }
        },
        beforeDestroy() {
            clearTimeout(this.timer); // 清除定时器
        },
    })
</script>
</body>
</html>
